<template>

  <div>
  </div>

  <!--    <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">-->
  <!--      <el-form-item-->
  <!--        label="年龄"-->
  <!--        prop="age"-->
  <!--        :rules="[-->
  <!--      { required: true, message: '年龄不能为空'},-->
  <!--      { type: 'number', message: '年龄必须为数字值'}-->
  <!--    ]"-->
  <!--      >-->
  <!--        <el-input type="age" v-model.number="numberValidateForm.username" autocomplete="off"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item>-->
  <!--        <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>-->
  <!--        <el-button @click="resetForm('numberValidateForm')">重置</el-button>-->
  <!--      </el-form-item>-->
  <!--    </el-form>-->
  <!--    <el-tree :data="templateData" :prop="templateData.tempName" @node-contextmenu="rightClick"></el-tree>-->
  <!--    <el-form :model="numberValidateForm" ref="numberValidateForm" :rules="rules">-->
  <!--      <el-form-item prop="username">-->
  <!--        <el-input placeholder="请输入用户名" v-model="numberValidateForm.username"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item prop="newPassword">-->
  <!--        <el-input placeholder="请输入密码" v-model="numberValidateForm.newPassword" show-password></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item prop="confirmPassword">-->
  <!--        <el-input placeholder="请确认密码" v-model="numberValidateForm.confirmPassword" show-password></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item>-->
  <!--        <el-button type="primary" plain @click="register">注册</el-button>-->
  <!--        <el-button @click="console.log()">返回</el-button>-->
  <!--      </el-form-item>-->
  <!--    </el-form>-->

  <!--    <el-upload-->
  <!--      class="avatar-uploader"-->
  <!--      action=""-->
  <!--      :show-file-list="false"-->
  <!--      :before-upload="handleAvatarSuccess">-->
  <!--      <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
  <!--      <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
  <!--    </el-upload>-->
</template>

<script>

  import MoveWindow from "./MoveWindow";

  export default {
    name: "LoginRegister",
    components: {MoveWindow},
    props: {
      name
    },
    data() {
      let validatePasswordAndUsername = (rule, value, callback) => {
        if (value === '')
          callback(new Error("不得为空"));
        else {
          if (!value.match('^[\\w]{6,16}$'))
            callback(new Error("仅由数字字母下划线组成，长度为6~16"));
        }
      };
      let validateConfirmPassword = (rule, value, callback) => {
        console.log(this.numberValidateForm.newPassword);
        if (value !== this.numberValidateForm.newPassword)
          callback(new Error("两次密码不一致"));
      };
      return {

        list: [{
          text: 'Play Now2',
          icon: 'iconfont icon-bofang',  //选填 字体图标 class
          children: [] //选填
        }, {
          text: 'Play Now1',
          icon: 'iconfont icon-bofang',  //选填 字体图标 class
          children: [] //选填1
        }
        ],

        // 文件树下文件
        files: [{
          // 文件/夹名
          name: "我的文件夹",
          // 文件/夹路径
          path: "",
          // 文件节点编号
          id: "0",
          // 文件类型
          type: "folder",
          // 父节点路径
          parent: undefined,
          // 孩子节点
          childNodes: [
            {
              name: "文件夹1",
              id: "0-1",
              type: "folder",
              childNodes: [
                {
                  name: "文件夹1",
                  id: "0-1-1",
                  type: "folder",
                  childNodes: []
                },
                {
                  name: "文件夹2",
                  id: "0-1-2",
                  type: "folder",
                  childNodes: [
                    {
                      name: "文件夹3",
                      id: "0-1-2-1",
                      type: "folder",
                      star: true,
                      childNodes: null
                    },
                    {
                      name: "文件1",
                      id: "0-1-2-2",
                      type: "file",
                      star: false,
                      childNodes: null
                    }
                  ]
                },
                {
                  name: "文件2",
                  id: '0-1-3',
                  type: "file",
                  star: false,
                  childNodes: null
                }
              ]
            },
            {
              name: "文件夹2",
              id: "0-2",
              type: "folder",
              childNodes: [
                {
                  name: "文件夹3",
                  id: "0-2-1",
                  type: "folder",
                  childNodes: null
                },
                {
                  name: "文件1",
                  id: "0-2-2",
                  type: "file",
                  childNodes: null
                }
              ]
            },
            {
              name: "文件2",
              id: "0-3",
              type: "file",
              childNodes: null
            },
            {
              name: "文件3",
              id: "0-4",
              type: "file",
              childNodes: null
            }
          ]
        }],
        imageUrl: '',
        head: "",
        templateData: {
          tempName: "你好"
        },
        data: ["222"],
        numberValidateForm: {
          username: "",
          password: "",
          newPassword: "",
          confirmPassword: ""
        },
        rules: {
          username: [{validator: validatePasswordAndUsername, trigger: 'blur'}, {
            required: true,
            message: "用户名不得为空"
          }],
          password: [{validator: validatePasswordAndUsername, trigger: 'blur'}, {
            required: true,
            message: "密码不得为空"
          }],
          newPassword: [{validator: validateConfirmPassword, trigger: 'blur'}, {
            required: true,
            message: "新密码不得为空"
          }],
          confirmPassword: [{validator: validateConfirmPassword, trigger: 'blur'}, {
            required: true,
            message: "新密码不得为空"
          }],
        },
        windowType: "login"
      }
    },
    methods: {

      gogogo(e, data) {
        console.log(e);
        console.log(data);
        console.log(typeof (this.$refs['ctxshow']));
        this.$refs.ctxshow.showMenu(e, data);
        console.log('gogogo');
      },

      hideMenu() {
        this.$refs.ctxshow.hideMenu(); // 隐藏菜单
      },
      show(data) {
        console.log('菜单显示了')
      },
      hide(data) {
        console.log('菜单隐藏了')
      },
      handlerSql() {
        // 自定义事件
      },

      handleAvatarSuccess(file) {
        // console.log(file);
        this.imageUrl = URL.createObjectURL(file);
      },
      beforeAvatarUpload(file) {
        console.log(file);
        console.log(file.raw);
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      getFile(res, file) {
        console.log(file);
        this.head = URL.createObjectURL(file);
      },

      rightClick(MouseEvent, object, Node, element) { // 鼠标右击触发事件
        this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
        this.menuVisible = true // 显示模态窗口，跳出自定义菜单栏
        var menu = document.querySelector('#menu')
        menu.style.left = MouseEvent.clientX + 1 + 'px'
        document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
        menu.style.top = MouseEvent.clientY - 10 + 'px'
      },
      foo() { // 取消鼠标监听事件 菜单栏
        this.menuVisible = false
        document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
      },

      clearInputs() {
        this.username = this.password = this.newPassword = this.confirmPassword = "";
      },

      goto(modelName) {
        this.clearInputs();
        this.windowType = modelName;
      },

      showMessage(text, typeOfMessage) {
        this.$message({
          message: text,
          type: typeOfMessage
        });
      },
      forgetWillOpen() {
        this.willOpen();
      },
      login(formName) {
        this.$ref[formName].validate((valid) => {
          if (valid) {
            this.apis.login(this.username, this.password, res => this.showMessage(res, 'success'));
          } else {
            return false;
          }
        });
      },
      register() {
        if (this.newPassword === this.confirmPassword) {
          this.apis.register(this.username, this.password, res => this.showMessage(res.data.data, 'success'));
        } else
          this.showMessage("两次密码不一致", "error");
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

